<template>
  <div class="menu-banner">
    <div class="menu-container" @mouseleave="bannerMenuHide()">
      <!-- 循环所有的分类 -->
      <ul class="menu-list">
        <li
          class="list-item"
          v-for="(item, index) in menus"
          :key="index"
          @mouseenter="bannerMenuShow(item.categoryId)"
        >
          <a target="blank">{{ item.categoryName }}</a>
          <i class="fa fa-angle-right"></i>
        </li>
      </ul>
    </div>
    <div
      class="menu-info"
      v-show="bannerMenuFlag"
      @mouseleave="bannerMenuHide()"
      @mouseenter="bannerMenuShow()"
    >
      <div class="menu-info-list"
        v-for="(list, key) in listInfoData"
        :data-key="key"
      > 
      <a @click="goToSearch(list.categoryName,list.categoryId)" class="secondLevel">
        {{ list.categoryName }}> 
      </a>
        <template
          v-for="(item, index) in list.thirdLevelCategoryVOS"
          :data-key="index"
          :data-index="index"
        >
          <a @click="goToSearch(item.categoryName,item.categoryId)" class="thirdLevel">
            {{ item.categoryName }}
          </a>
        </template>
      </div>
    </div>
    <banner :banners="banners"></banner>
  </div>
</template>

<script>
import Banner from "./Banner";
import {getCategory}  from "./../../service/category";
import {getAdvertise} from "./../../service/home";
export default {
  data() {
    return {
      bannerMenuFlag: false,
      menuTimer: "",
      listInfoData: [],   // 一级分类
      menus: [],
      banners: [],  
      products:[]
    };
  },
  components: {
    Banner: Banner,
  },
  methods: { 
    bannerMenuHide() {
      this.menuTimer = setTimeout(() => {
        this.bannerMenuFlag = false;
      }, 300);
    },
    bannerMenuShow(id) {   //根据id查二级列表
      if (id) {
        this.listInfoData = this.products[id]; 
      }
      this.bannerMenuFlag = true;
      clearTimeout(this.menuTimer);
    },
    async init() {
      const {data}=await getCategory();
      //this.menus=data;
      for (let i = 0; i < data.length; i++) {
            const cate = data[i];
            this.menus.push({ 
              categoryName:cate.categoryName,
              categoryId:cate.categoryId,
              categoryLevel:cate.categoryLevel
            });
            this.products[cate.categoryId]= cate.secondLevelCategoryVOS; 
            //window.console.log("二级分类",this.products[cate.categoryId])
      };
      this.getAds();
    },
    goToSearch(name,id){
      this.$router.push({
        name:'searchResult',
        params:{
          keywords:"",
          goodsCategoryId:id
        }
      })
    },
    async getAds(){
      const { data } = await getAdvertise();
      //window.console.log("广告",data)
      this.banners=data;
    }
  },
  // 生命周期钩子函数
  mounted() {
    this.init();
  },
  computed: {
    menuListMatch() {
      const matchData = [];
      if (this.listInfoData && this.listInfoData.length) {
        for (let i = 0; i < this.listInfoData.length; i += 6) {
          matchData.push(this.listInfoData.slice(i, i + 6));
        }
      }
      return matchData;
    },
  },
};
</script>

<style lang="less">
.menu-banner {
  position: relative;
  width: 1226px;
  height: auto;
  margin: 0 auto;
  .menu-container {
    position: absolute;
    left: 0;
    top: 0;
    padding-top: 10px;
    width: 235px;
    height: auto;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
  }
}

.menu-list {
  padding: 20px 0;
  height: 400px;
  .list-item {
    display: flex;
    font-size: 16px;
    padding-left: 30px;
    &:hover {
      background-color: #1baeae;
    }

    a {
      position: relative;
      display: inline-block;
      width: 170px;
      height: 42px;
      line-height: 42px;
      color: #fff;
      text-align: left;
      background-color: transparent;
    }

    i {
      font-size: 28px;
      color: #fff;
      line-height: 42px;
    }
  }
}



.menu-info {
  position: absolute;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  left: 235px;
  top: 0;
  z-index: 11;
  border: 1px solid #fff;
  width: 1000px;
  box-shadow: 3px 8px 16px rgba(0, 0, 0, 0.18);
  background-color: #fff;
  .menu-info-list {
    width: 996px;
    height: 150px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
   .secondLevel{
      font-size: 15px; 
      font-weight:bold ;
      display: block;      
      margin: 18px 20px;
      line-height: 20px;
      color: gray;
      }
    .thirdLevel{
      display: inline;
      white-space: normal;
      margin: 20px;
      width: 83px;
      line-height: 30px;
      font-size: 12px;
      color: gray;
      text-align: start;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    a:hover {
      color: #1baeae;
      cursor:pointer;
    }
    }
  }

</style>